<template>
  <view class="w-100 re h-100">
    <view class="w-100 px-3 pt-3 re z-999" style="z-index: 99999999">
      <TabBarTime
        :list="time_list"
        :list_id="list_id"
        @get_change="get_change_list"
        @get_other="set_other"
      ></TabBarTime>
    </view>
    <scroll-view
      class="scroll-view_H uni-scroll"
      scroll-y="true"
      @scrolltolower="lower"
      :lower-threshold="200"
    >
      <!-- 瀑布流布局列表 -->
      <view class="w-100 px-3 py-2" v-if="list_id == 1">
        <view class="pubuItem">
          <view
            class="item-masonry"
            v-for="(item, index) in data_list"
            :key="index"
            @click="get_details_info(item)"
          >
            <ImageFile
              mode="widthFix"
              :url="item.thumbnail"
              className="w-100 circle16"
            />
            <view class="w-100 font24 font500 t-0 pl-2 pt-1">
              {{ item.name || "" }}
            </view>
          </view>
        </view>
        <view class="w-100 h200"></view>
      </view>
      <view class="w-100 px-3 py-2" v-else>
        <view
          class="w-100 h222 f-b-c circle34 show0 mb-3 bg-f8ff ov-hd re"
          v-for="(item, index) in data_list"
          :key="index"
          @click="get_details_info(item)"
        >
          <ImageFile
            :url="item.thumbnail"
            className="w246 h222 ab top0 left0 z-99"
          />
          <view></view>
          <view class="w490 bg-white h222 p-3 ty-circle-box re z-999 right0">
            <view class="font32 t-20 font700 f-b-c h32">{{
              item.name || ""
            }}</view>
            <view class="font24 t-8 f-b-c h24" style="margin-top: 16rpx"
              >{{ item.startDate || "" }} 至 {{ item.endDate || "" }}</view
            >
            <view
              class="ab right30 bottom30 w164 h64 f-c-c font28 t-0 circle20 bg-theme"
              >查看详情</view
            >
            <HornMargin type="left-bottom" :width="44" :height="40" />
          </view>
        </view>
        <view class="w-100 h200"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import TabBarTime from "./components/tab_bar_time.vue";
import HornMargin from "../../components/horn_margin.vue";
import ImageFile from "../../components/img_file.vue";

import Mixin from "../../common/mixin.js";
import Time from "../../common/time.js";

import { activityList } from "../../api/ticket/index.js";

export default {
  mixins: [Time, Mixin],
  components: {
    TabBarTime,
    HornMargin,
    ImageFile,
  },
  props: {
    type: {},
  },
  data() {
    return {
      query: {
        pageSize: 10,
        currentPage: 1,
        // endTime:"",
        // startTime:"",
        // date:"",
        type: this.type, // 活动:ACTIVITY/课程:COURSE/会员专属：VIP_EXCLUSIVE,
      },
      time_list: [
        { title: "全部", name: "2022", code: 1 },
        { title: "今天", name: "06-11", code: 2 },
        { title: "明天", name: "06-12", code: 3 },
        { title: "周六", name: "06-13", code: 4 },
        { title: "其他", name: "", code: 5 },
      ],
      list_id: "1",
      data_list: [],
    };
  },
  created() {
    this.get_time();
    this.path = uni.getStorageSync("host") || "";
    this.get_data_list();
  },
  mounted() {
    this.query.year = this.time_list[0].name;
  },
  methods: {
    set_other(val) {
      this.time_list[4].title = val.title;
      this.time_list[4].name = val.name;
      this.time_list[4].time = val.time;
      this.list_id = 5;

      this.data_list = [];
      this.query.date = val.date;
      this.get_data_list();
    },
    get_details_info(val) {
      // 点击跳转详情 activity
      uni.setStorageSync("details", val);
      uni.setStorageSync("purchase_type", this.type);
    },
    get_data_list() {
      this.is_loading = true;
      activityList(this.query).then((res) => {
        const { records, current, pages } = res.body;
        this.data_list = [...this.data_list, ...records];
        // 当前页大于总页 显示没有更多了
        if (current >= pages) {
          this.is_loading = true;
        } else {
          this.is_loading = false;
        }
      });
    },
    get_change_list(val) {
      this.query.currentPage = 1;
      this.list_id = val.code;
      if (val.code == 1) {
        delete this.query.date;
        this.query.year = val.name;
        // this.query.endTime = ""
      } else {
        this.query.date = `${val.date}`;
        // this.query.endTime = `${val.time}235959`
      }
      this.data_list = [];
      this.get_data_list();
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.scroll-view_H {
  position: absolute;
  top: 152rpx;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.ty-circle-box {
  border-radius: 34rpx 0 0 0;
}
.pubuBox {
  padding: 22rpx;
}

.pubuItem {
  column-count: 2;
  column-gap: 20rpx;
}

.item-masonry {
  box-sizing: border-box;
  border-radius: 16rpx;
  overflow: hidden;
  break-inside: avoid;
  /*避免在元素内部插入分页符*/
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

.item-masonry image {
  width: 100%;
}

.listtitle {
  padding-left: 22rpx;
  font-size: 24rpx;
  padding-bottom: 22rpx;

  .listtitle1 {
    line-height: 39rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 39rpx;
    max-height: 78rpx;
  }

  .listtitle2 {
    color: #ff0000;
    font-size: 32rpx;
    line-height: 32rpx;
    font-weight: bold;
    padding-top: 22rpx;

    .listtitle2son {
      font-size: 32rpx;
    }
  }

  .listtitle3 {
    font-size: 28rpx;
    color: #909399;
    line-height: 32rpx;
    padding-top: 22rpx;
  }
}

.Index {
  width: 100%;
  height: 100%;
}
</style>
